<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <link rel="stylesheet" th:href="@{/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/zTree/js/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.excheck.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<br>
<form class="layui-form" action="" id="form1">
    <input type="hidden" name="ids" id="ids" th:value="${ids}" >
    <input type="hidden" name="id" id="id" th:value="${role.id}">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required"
                       autocomplete="off" class="layui-input" th:value="${role.name}"
                >
            </div>
        </div>

    </div>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-inline">
                <input lay-verify="required" type="text" name="description"
                       autocomplete="off" class="layui-input" th:value="${role.description}">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-inline">
                <ul id="pmsTree" class="ztree"></ul>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" onclick="doSave();" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
        </div>
    </div>


</form>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var layer;
    layui.use(['form' , 'laydate'], function(){
        layer = layui.layer;
    });

    function doSave() {
        //获取权限id
        var treeObj = $.fn.zTree.getZTreeObj("pmsTree");
        var nodes = treeObj.getCheckedNodes(true);
        var idsArr = new Array();
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            idsArr.push(node.id);

        }
        console.log(idsArr);
        var ids = idsArr;
        console.log(ids);
        $('#ids').val(ids);


        var requestData = $("#form1").serialize();
        $.post("/role/save",requestData,function (responseData) {
            console.log(responseData);
            if(responseData.success ==1){
                layer.alert("修改成功",{yes:function () {
                        parent.layer.closeAll();
                    }});
            }else{
                layer.alert("修改失败",{yes:function () {
                        parent.layer.closeAll();
                    }});
            }

        })
    }

</script>

<SCRIPT type="text/javascript">
    <!--
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    /*var zNodes =[
        { id:1, pId:0, name:"随意勾选 1", open:true},
        { id:11, pId:1, name:"随意勾选 1-1", open:true},
        { id:111, pId:11, name:"随意勾选 1-1-1"},
        { id:112, pId:11, name:"随意勾选 1-1-2"},
        { id:12, pId:1, name:"随意勾选 1-2", open:true},
        { id:121, pId:12, name:"随意勾选 1-2-1"},
        { id:122, pId:12, name:"随意勾选 1-2-2"},
        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
        { id:21, pId:2, name:"随意勾选 2-1"},
        { id:22, pId:2, name:"随意勾选 2-2", open:true},
        { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
        { id:222, pId:22, name:"随意勾选 2-2-2"},
        { id:23, pId:2, name:"随意勾选 2-3"}
    ];*/



    $(document).ready(function(){
        $.get("/permission/listjson",function (responseData) {
            var zNodes = responseData.data;
            console.log(zNodes);
            $.fn.zTree.init($("#pmsTree"), setting, zNodes);

            var pmsIds = $("#ids").val().split(",");

            var zTreeObj = $.fn.zTree.getZTreeObj("pmsTree");


            for (var i=0;i<pmsIds.length;i++){
                console.log(pmsIds[i]);
                var node = zTreeObj.getNodeByParam("id",pmsIds[i]);
                zTreeObj.checkNode(node);
            }


        });



    });
    //-->
</SCRIPT>

</body>
</html>